﻿div.logo {
    width: 100px;
    height: 100px;
    border: 4px solid black;
    box-sizing: border-box;
    position: relative;
    background-color: white;

    & > div {
        position: absolute;
    }

    div.red {
        border-right: 4px solid black;
        top: 0;
        bottom: 0;
        left: 0;
        width: 27%;
        background-color: #EA5664;
    }
    /* Similar code for div.orange and div.white */
    div.orange {
        border-top: 4px solid black;
        bottom: 0;
        right: 0;
        width: 73%;
        height: 50%;
        background-color: #0000ff;
    }

    div.white {
        border-left: 4px solid black;
        top: 0;
        right: 0;
        width: 20%;
        height: 50%;
        background-color: #fffff;
    }
}

div.logo {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    position: relative;
    background-color: white;

    &::before,
    &::after {
        z-index: 1;
        box-sizing: border-box;
        content: '';
        position: absolute;
        border: 4px solid transparent;
        width: 100%;
        height: 100%;
    }

    &::before {
        top: 0;
        left: 0;
        border-top-color: black;
        border-right-color: black;
    }

    &::after {
        bottom: 0;
        right: 0;
        border-bottom-color: red; // Red for demo purposes only
        border-left-color: red;
    }
}

div.logo {
    div.red {
        /* ... */
        width: 0;
        animation: red 1.5s infinite;
        animation-direction: alternate;
    }
}

@keyframes red {
    0%, 50% {
        width: 0;
        opacity: 0;
    }

    50.01% {
        opacity: 1;
    }

    65%, 100% {
        opacity: 1;
        width: 27%;
    }
}
